<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>学生管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../css/layui.css" media="all">

		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

	</head>

	<body>
		<style>
			.black_overlay {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: lightgray;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=80);
			}
			
			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				left: 25%;
				width: 50%;
				height: 40%;
				box-shadow: 2px 2px 10px #009688;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
			
			.white_content_small {
				display: none;
				position: absolute;
				top: 20%;
				left: 30%;
				width: 40%;
				height: 50%;
				border: 16px solid lightblue;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
		</style>
		<div class="layui-container">

			<div class="layui-row" id="app">

				<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
					<legend>学生管理</legend>
					<div style="margin-top: 15px;padding-left: 50px;">
						<button class="layui-btn layui-btn-warm layui-btn-lg" onclick="ShowDiv('MyDiv','fade')" style="margin-left: 12px;margin-bottom: 15px;">导入学生</button>
					</div>

				</fieldset>

				<fieldset class="layui-elem-field site-demo-button" style="margin-top: 130px;">
					<legend>密码重置</legend>
					<div style="margin-top: 15px;">

						<div style="margin-bottom:30px;margin-top: 20px;padding-left: 30px;">
							<div class="layui-inline">
								<input class="layui-input" name="queryStuId" v-model="queryStuId" id="demoReload" autocomplete="off" placeholder="输入学号" style="margin-left: 20px;">
							</div>
							<button class="layui-btn" data-type="reload" style="margin-left: 20px;" @click="tog">搜索</button>

						</div>

						<div id="layerDemo" v-show="isShow">
							<div style="margin-top: 15px;margin-bottom:15px;padding-left: 50px;padding-right: 50px;">
								<table class="layui-table" style="text-align: center;">
									<colgroup>
										<col width="250">
										<col width="250">
										<col width="400">
									</colgroup>
									<thead>
										<tr>

											<th style="text-align: center;">学号</th>
											<th style="text-align: center;">姓名</th>
											<th style="text-align: center;">班级</th>
											<th style="text-align: center;">操作</th>
										</tr>
									</thead>
									<tbody>

										<tr>
											<td>{{stunum}}</td>
											<td>{{name}}</td>
											<td>{{cla}}</td>

											<td>
												<button class="layui-btn" data-method="notice" style="background-color: red;" @click="resetStuPwd()">重置</button>
											</td>
										</tr>

									</tbody>

								</table>

							</div>

						</div>

					</div>

				</fieldset>

			</div>
		</div>
		<div id="fade" class="black_overlay">
		</div>
		<div id="MyDiv" class="white_content">
			<div style="text-align: right; cursor: default; height: 40px;">
				<span onclick="CloseDiv('MyDiv','fade')"><i class="layui-icon layui-icon-close" style="font-size: 30px;"></i>  </span>
			</div>

			<form class="layui-form" id="uploadForm" enctype="multipart/form-data">

				<div class="layui-form-item layui-col-lg-offset3" style="margin-top: 35px;">
					<div class="layui-input-block ">
						<input type="file" name="files" id="files" accept=".xls" onchange="loadFile(this)"/>
					</div>

					<div class="layui-input-block" style="margin-top: 50px;">

						<button class="layui-btn" id="upload" type="button">立即提交</button>
						<div style="display: inline;position: relative;top:8px;left: 10px;"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; display:none;" id="wait"></i> </div>
					</div>
				</div>
			</form>
		</div>

		<script src="../../layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.form.js"></script>
		<script src="../../js/jquery.cookie.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>

		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			
			//上传文件限制类型和大小
			function loadFile(office) {
				var filePath = office.value;
				var fileExt = filePath.substring(filePath.lastIndexOf("."))
					.toLowerCase();

				if(!checkFileExt(fileExt)) {
					alert("文件类型错误,请重新上传！");
					office.value = "";
					return;
				} else if((office.files[0].size / 1024).toFixed(0) > 18432) {
					alert("上传文件需小于18M！");
					office.value = "";
					return;

				}

				if(office.files && office.files[0]) {
					//               alert(office);
					//                alert(office.files[0])
					//alert('你选择的文件大小' + (office.files[0].size / 1024).toFixed(0) + "kb");
					//                var xx = office.files[0];
					//                for (var i in xx) {
					//                    alert(xx[i])
					//                }
				} else {
					office.select();
					var url = document.selection.createRange().text;
					try {
						var fso = new ActiveXObject("Scripting.FileSystemObject");
					} catch(e) {
						alert('如果你用的是ie8以下 请将安全级别调低！');
					}
					//alert("文件大小为：" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb");
				}
			}

			function checkFileExt(ext) {
				if(!ext.match(/.xls|.xls/i)) {
					return false;
				}
				return true;
			}
			
			var vue = new Vue({
				el: "#app",
				data: {
					stuid: '',
					name: '',
					stunum: '',
					cla: '',
					isShow: false,
					queryStuId: "",
					student: ""
				},
				methods: {
					tog: function() {
						this.isShow = !this.isShow;

						//alert(vue.queryStuId);
						var stuNum = this.queryStuId;
						$.ajax({
							type: "get",
							url: "http://localhost:8080/teacher/queryStudent.do",
							async: false,
							data: {
								stuNum: stuNum,
								uid: $.cookie("uid")
							},
							dataType: "json",
							success: function(data) {
								var dataObj = eval("(" + data + ")");
								vue.stunum = dataObj.stuNum;
								vue.name = dataObj.stuName;
								vue.cla = dataObj.stuClass;
								vue.stuid = dataObj.stuId;
							}
						});
					},
					resetStuPwd: function() {
						if(confirm("确定重置？")) {
							var ssid = this.stuid;
							$.ajax({
								type: "get",
								url: "http://localhost:8080/teacher/resetStuPwd.do",
								async: false,
								data: {
									ssid: ssid,
									uid: $.cookie("uid")
								},
								dataType: "json",
								success: function(data) {
									alert("重置成功 ！");
								}
							});
						}

					}

				}

			});

			//弹出隐藏层
			function ShowDiv(show_div, bg_div) {
				document.getElementById(show_div).style.display = 'block';
				document.getElementById(bg_div).style.display = 'block';
				var bgdiv = document.getElementById(bg_div);
				bgdiv.style.width = document.body.scrollWidth;
				// bgdiv.style.height = $(document).height();
				$("#" + bg_div).height($(document).height());
			};
			//关闭弹出层
			function CloseDiv(show_div, bg_div) {
				document.getElementById(show_div).style.display = 'none';
				document.getElementById(bg_div).style.display = 'none';
			};

			$("#upload").click(function() {
				$("#wait").show();
				var form = new FormData(document.getElementById("uploadForm"));
				//             var req = new XMLHttpRequest();
				//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
				//             req.send(form);
				$.ajax({
					url: "http://localhost:8080/teacher/addStudent.do?uid=" + $.cookie("uid"),
					type: "post",
					data: form,
					dataType: "json",
					processData: false,
					contentType: false,

					success: function(data) {

						//alert("ok："+data);
						alert("添加成功！");
						//上传成功，调回原页面
						$("#wait").hide();
						CloseDiv('MyDiv', 'fade');

					},
					error: function(data) {
						//alert("上传失败");
						alert("添加失败！");
						$("#wait").hide();
						CloseDiv('MyDiv', 'fade');
					}
				});
			});

			/*layui.use('layer', function() { //独立版的layer无需执行这一句
				var $ = layui.jquery,
					layer = layui.layer; //独立版的layer无需执行这一句

				//触发事件
				var active = {

					notice: function() {
						layer.open({
							type: 1,
							title: false, //不显示标题栏
							closeBtn: false,
							area: '300px;',
							shade: 0.8,
							id: 'LAY_layuipro', //设定一个id，防止重复弹出

							btn: ['确定重置', '取消'],
							btnAlign: 'c',
							moveType: 1 //拖拽模式，0或者1
								,
							content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">确认重置该学生密码？<br><br><br>该操作不可逆请谨慎操作，重置后为默认密码</div>',
							success: function(layero) {
								var btn = layero.find('.layui-layer-btn');
								btn.find('.layui-layer-btn0').attr({
									href: 'http://localhost:8080/teacher/resetStuPwd.do?uid='+$.cookie("uid")+"&ssid="+vue.stuid, //点击确认后请求的url
									target: '_blank'
								});
							}
						});
					}
				};
				$('#layerDemo .layui-btn').on('click', function() {
					var othis = $(this),
						method = othis.data('method');
					active[method] ? active[method].call(this, othis) : '';
				});

			});*/
		</script>

	</body>

</html>